<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 左侧区域 -->
      <div class="login-left">
        <header class="login-header">
          <img :src="navLogo" alt="Logo" class="header-logo">
          <h1 class="login-title-text">声生知音</h1>
        </header>
        <div class="login-left-content">
          <h1 class="login-title">Hello Friend!</h1>
          <p class="login-description">
            欢迎加入声生知音！您将体验到AI语音合成技术，让您的创意转化为动听的声音。注册即可享受个性化的语音服务，快开启你的声音艺术之旅！
          </p>
        </div>
        <div class="login-left-overlay"></div>
        <img :src="login" alt="background" class="login-left-image">
      </div>
      <!-- 右侧区域 -->
      <div class="login-right">
        <h2 class="login-right-title"> 注册账号</h2>
        <div class="login-form">
          <el-form :model="form" :rules="rules" ref="formRef">
            <!-- 账号 -->
            <el-form-item prop="username">
              <el-input v-model="form.username" placeholder="请输入用户名" size="large">
                <template #prefix>
                  <el-icon>
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input v-model="form.password" type="password" placeholder="请输入密码" size="large" show-password>
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <!-- 确认密码 -->
            <el-form-item prop="confirmPassword">
              <el-input v-model="form.confirmPassword" type="password" placeholder="请确认密码" size="large" show-password>
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-button type="primary" @click="handleLogin" class="login-submit-button" size="large">
              立即注册
            </el-button>
            <div class="register-link">
              已有账号？
              <router-link to="/login"> 点击登录</router-link>
            </div>
          </el-form>
          <div class="login-social">
            <p class="social-text">其他登录方式</p>
            <div class="social-icons">
              <button class="social-icon">
                <el-icon class="social-icon-inner">
                  <Position />
                </el-icon>
              </button>
              <button class="social-icon">
                <el-icon class="social-icon-inner">
                  <Connection />
                </el-icon>
              </button>
              <button class="social-icon">
                <el-icon class="social-icon-inner">
                  <ChatDotRound />
                </el-icon>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { ChatDotRound, User, Lock, Position, Connection } from '@element-plus/icons-vue'
  import { message } from 'ant-design-vue';
  import { useRouter } from 'vue-router'
    import navLogo from '@/assets/images/navLogo.webp'
  //接口导入
  import { userRegister } from '@/api/user'
    import login from '@/assets/images/login.webp'
  const router = useRouter()
  const formRef = ref()
  const form = reactive({
    username: '',
    password: '',
    confirmPassword: ''
  });
 
  const validatePass2 = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请再次输入密码'))
    } else if (value !== form.password) {
      callback(new Error('两次输入密码不一致!'))
    } else {
      callback()
    }
  };
  const rules = reactive({
    username: [
      { required: true, message: '用户名不能为空', trigger: ['blur', 'change'] },
      { min: 3, max: 10, message: '用户名长度需在 3-10 个字符之间', trigger: ['blur', 'change'] },
      // { pattern: /^[a-zA-Z0-9_-]+$/, message: '用户名只能包含字母、数字、下划线和中划线', trigger: ['blur', 'change'] }
    ],
    password: [
      { required: true, message: '密码不能为空', trigger: ['blur', 'change'] },
      { min: 6, message: '密码长度至少6位', trigger: ['blur', 'change'] },
      { max: 12, message: '密码长度至多12位', trigger: ['blur', 'change'] }
      // { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, message: '密码需包含大小写字母和数字', trigger: ['blur', 'change'] }
    ],
    confirmPassword: [
      { required: true, message: '请确认密码', trigger: ['blur', 'change'] },
      { validator: validatePass2, trigger: ['blur', 'change'] }
    ]
  });

  //登录注册的post请求
  const handleLogin = async () => {
    try {
      await formRef.value.validate()
      const res = await userRegister({
        username: form.username,
        password: form.password
      })
      message.success('注册成功',1)
      router.push('/login')
    } catch (error) {
      console.error('表单验证失败:', error)
      message.error('请检查输入信息是否正确',1)
    }
  }
</script>

<style scoped lang="scss">
  .login-container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('@/assets/images/downloadImage.webp') center center / cover no-repeat;
    position: relative;


    .login-box {
      width: 60%;
      height: 45%;
      background: white;
      border-radius: 2rem;
      display: flex;
      overflow: hidden;
      margin: 0 auto;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

      .login-left {
        width: 50%;
        padding: 3rem;
       
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        position: relative;
        overflow: hidden;

          .login-header {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 11;
          display: flex;
          flex-direction: column;
          align-items: center;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 1rem;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

          .login-title-text {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 0.7rem;
            background: linear-gradient(45deg, #2563eb, #60a5fa);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: 0.08em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            text-align: center;
          }
        }

        .header-logo {
          height: 80px;
          width: 160px;
          object-fit: contain;
          margin: 1rem 0 0.5rem 0;
          display: block;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          filter: brightness(1.2) contrast(1.1) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));

          &:hover {
            transform: scale(1.15) translateY(-2px);
            filter: brightness(1.3) contrast(1.15) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
          }
        }

        .login-left-content {
          position: relative;
          z-index: 10;
          margin-top: 2rem;

         .login-title {
            margin: 0 auto;
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 1.5rem;
            letter-spacing: 0.02em;
            background: linear-gradient(135deg, #60a5fa 0%, #4b7adf 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
            line-height: 1.2;
            transform: translateZ(0);
            backface-visibility: hidden;
              font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
          }

            .login-description {
            font-size: 1.1rem;
            margin-bottom: 1.25rem;
            color:rgb(85, 75, 75);
            line-height: 2;
            text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
            font-weight: 500;
            letter-spacing: 0.01em;
          }
        }

        .login-left-overlay {
          position: absolute;
          inset: 0;
          z-index: 1;
        }

        .login-left-image {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0.8;
          /* mix-blend-mode: overlay; */
          z-index: 2;
        }

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.1);
          z-index: 1;
        }
      }

      .login-right {
        width: 50%;
        padding: 4rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: white;

        .login-right-title {
          font-size: 1.875rem;
          font-weight: bold;
          margin-bottom: 2.5rem;
          color: #1f2937;
          letter-spacing: -0.025em;
        }

        .login-form {
          width: 100%;
          max-width: 28rem;
          display: flex;
          flex-direction: column;
          gap: 1rem;

          .login-forgot-password {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 0.5rem;

            .forgot-password-link {
              font-size: 0.875rem;
              color: #3b82f6;

              &:hover {
                color: #1d4ed8;
              }
            }
          }

          .login-submit-button {
            width: 100%;
            border-radius: 1rem;
            white-space: nowrap;
          }

          .register-link {
            margin-top: 1.5rem;
            text-align: center;
            font-size: 14px;

            a {
              color: #4096ff;
              transition: all 0.3s ease;
              display: inline-block;
              position: relative;
              padding: 2px 4px;
              text-decoration: none;

              &:hover {
                color: #1b7aff;
                transform: translateY(-1px) scale(1.02);
                text-shadow: 0 2px 4px rgba(27, 122, 255, 0.1);
              }

              &::after {
                content: '';
                position: absolute;
                width: 100%;
                height: 1px;
                bottom: 0;
                left: 0;
                background-color: #1b7aff;
                transform: scaleX(0);
                transform-origin: bottom right;
                transition: transform 0.3s ease;
              }

              &:hover::after {
                transform: scaleX(1);
                transform-origin: bottom left;
              }
            }
          }
        }

        .login-social {
          text-align: center;

          .social-text {
            color: #9ca3af;
            margin-bottom: 1rem;
            font-size: 0.875rem;
          }

          .social-icons {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 1rem;

            .social-icon {
              width: 2.5rem;
              height: 2.5rem;
              border-radius: 9999px;
              background: #f9fafb;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: background-color 0.3s ease;

              &:hover {
                background: #e0f2fe;
              }

              .social-icon-inner {
                font-size: 1.25rem;
                color: #9ca3af;
                transition: color 0.3s ease;

                &:hover {
                  color: #3b82f6;
                }
              }
            }
          }
        }
      }
    }
  }

  :deep(.el-input__wrapper) {
    width: 100% !important;
    background-color: rgb(249 250 251) !important;
    border: 1.5px solid #e5e7eb !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    transition: all 0.2s ease !important;

    &.is-focus {
      background-color: white !important;
      border-color: #4096ff !important;
      box-shadow: 0 0 0 3px rgba(64, 150, 255, 0.1) !important;
    }
  }

  :deep(.el-form-item) {
    margin-bottom: 1.75rem !important;
    position: relative !important;
  }

  :deep(.el-form-item__error) {
    font-size: 0.875rem !important;
    color: #dc2626 !important;
    margin-top: 0.375rem !important;
    padding-left: 0.5rem !important;
    position: absolute !important;
    animation: fadeIn 0.3s ease-in-out !important;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  :deep(.el-form-item.is-error .el-input__wrapper) {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.1) !important;
  }

  :deep(.el-form-item.is-error .el-input__wrapper:hover) {
    border-color: #ef4444 !important;
  }

  :deep(.el-form-item.is-error .el-input__wrapper:focus-within) {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
  }


  :deep(.el-input__prefix-inner)::after,
  :deep(.el-input__prefix-inner)::before {
    content: none !important;
    display: none !important;
  }

  :deep(.el-input__inner) {
    width: 100% !important;
    height: 52px !important;
    font-size: 15px !important;
    color: #1f2937 !important;

    &::placeholder {
      color: #9CA3AF !important;
    }
  }

  :deep(.el-input__prefix) {
    margin-right: 12px !important;
    color: #9CA3AF !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;

    .el-icon {
      font-size: 18px !important;
    }
  }

  :deep(.el-button--primary) {
    background: linear-gradient(135deg, #4096ff 0%, #1677ff 100%) !important;
    border: none !important;
    height: 52px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 6px rgba(64, 150, 255, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

    &:hover {
      transform: translateY(-1px) !important;
      box-shadow: 0 6px 8px rgba(64, 150, 255, 0.3) !important;
    }
  }

  :deep(.el-button--default) {
    border: none !important;
  }

  .el-icon {
    transition: all 0.3s ease;
  }
</style>